<template>
	<view class="detail">
		<view class="content">
			<view class="summary">
				<view class="avatar">
					<image :src="teacher.avatar" mode="aspectFill" @click="preImg"></image>
				</view>
				<view class="profile">
					<text class="name">讲师姓名：{{teacher.name}}</text>
					<text class="level" v-if="teacher.level===0">职位：高级讲师</text>
					<text class="level" v-if="teacher.level===1">职位：首席讲师</text>
					<text class="phone">联系方式：{{teacher.mobile}}</text>
					<text class="email">邮箱：{{teacher.email}}</text>
				</view>
			</view>
			<view class="intro">
				<view class="teacher">
					<teacher-header>
						<template #name>
							<view class="left">
								<uni-icons type="person-filled" size="30" color="#3bba94"></uni-icons>
								<text>讲师简介</text>
							</view>
						</template>
						<template #custom>
							<text>详细信息</text>
						</template>
					</teacher-header>
				</view>
				<rich-text :nodes="teacher.intro"></rich-text>
			</view>
			<view class="course">
				<teacher-header>
					<template #name>
						<view class="left">
							<uni-icons type="list" size="30" color="#3bba94"></uni-icons>
							<text>讲师课程</text>
						</view>
					</template>
				</teacher-header>
				<view class="courseList">
					<course-item v-for="(item,index) in courses" :key="item.id" :course="item"></course-item>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getTeacherDetail,
		getTeacherCourses
	} from '../../apis/teacherDetail.js'
	import {
		ref
	} from 'vue';
	const courses = ref([])
	const teacher = ref({})
	const preImg = () => {
		uni.previewImage({
			urls: [teacher.value.avatar]
		})
	}
	const getTeachers = async (id) => {
		const res = await getTeacherDetail(id)
		teacher.value = res.data.data
	}
	const getCourses=async(id)=>{
		const res=await getTeacherCourses(id)
		const resArr=res.data.data;
		resArr.forEach(item => {
			item.url=`/pages/course/course?id=${item.id}`
		});
		courses.value=resArr
		console.log(courses.value)
	}
	onLoad((e) => {
		getTeachers(e.id)
		getCourses(e.id)
	})
</script>

<style lang="scss" scoped>
	.detail {
		.content {
			.summary {
				display: flex;
				justify-content: space-between;
				padding: 50rpx 30rpx 30rpx;

				.avatar {
					margin-right: 50rpx;

					image {
						width: 300rpx;
					}
				}

				.profile {
					display: flex;
					flex-direction: column;
					justify-content: flex-end;

					text {
						margin: 20rpx 0;
						font-size: 30rpx;
						color: #666;
						font-weight: 600;
					}
				}
			}

			.intro {
				padding-top: 50rpx;

				.teacher {
					.left {
						display: flex;
						align-items: center;
					}
				}

				p {
					text-indent: 2em;
					padding: 0 30rpx;
					margin-top: 30rpx;
					font-size: 30rpx;
					color: #666;
				}
			}

			.course {
				padding-top: 50rpx;

				.left {
					display: flex;
					align-items: center;
				}

				.courseList {
					padding: 0 30rpx;
					margin-top: 30rpx;
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					grid-gap: 30rpx;
				}
			}
		}
	}
</style>